7.1 - Building an Address Book

Digitizing People

Meet Bob. Bob is our friend. But how do we get in touch with Bob?

Look at the code in the editor. We have Bob's information stored in anassociative array named bob. bob has a property called firstName which has avalue of "Bob". Similarly, it has properties lastName, phoneNumber andemail which each have values.

To access the values for each property we write array.property. Check out line 8 where we log to the consolebob.firstName.

Copying the format we used on line 8, fill in lines 9 and 10 so that Bob's lastName and email are printed out.
var bob = {
    firstName: "Bob",
    lastName: "Jones",
    phoneNumber: "(650) 777-777",
    email: "bob.jones@example.com"
};
console.log(bob.firstName);
console.log(bob.lastName);
console.log(bob.email);
More People

Just like with strings and numbers, we can put multiple objects into an array. We want to practice extracting information from different objects which are stored in the same array.

This allows us to put all of our contact objects into a unified list. If the objects are contact entries, then the list is the book binding that ties all of the contact entries together.

  1. Create an object called mary. It has the same properties as bob. Her name is Mary Johnson, her phoneNumber is "(650) 888 - 8888" and her email is"mary.johnson@example.com".
  2. Create an array called contacts. Putbob in first (at index 0), then mary (at index 1).
  3. Write a console.log statement that prints out Mary's phone number.
var bob = {
    firstName: "Bob",
    lastName: "Jones",
    phoneNumber: "(650) 777-7777",
    email: "bob.jones@example.com"
};
var mary = {
    firstName: "Mary",
    lastName: "Johnson",
    phoneNumber: "(650) 888-8888",
    email: "mary.johnson@example.com"
};
var contacts = [bob, mary];
console.log(mary.phoneNumber);
Displaying People

We currently can print out information about any person in our contacts with console.log. That gets tiring. If only we knew some code that stores blocks of code that we can call.

Good thing we know about functions!

We can create a function that consistently displays a specific property of an object

  1. Define a function called printPersonthat takes a parameter called person.
  2. In the function body, print out the person parameter's firstName property by accessing it with a dot just like before. Then print a space, then their lastNamein the same way.
  3. Call the printPerson() function to print out the first item in the contactsarray. The first item in an array is at position 0.
  4. Then on the next line, callprintPerson() again to print out the second item in the contacts array.

Don't worry if your output appears twice - we're just double checking your code!

var bob = {
    firstName: "Bob",
    lastName: "Jones",
    phoneNumber: "(650) 777-7777",
    email: "bob.jones@example.com"
};
var mary = {
    firstName: "Mary",
    lastName: "Johnson",
    phoneNumber: "(650) 888-8888",
    email: "mary.johnson@example.com"
};
var contacts = [bob, mary];
// printPerson added here
function printPerson(person){
    console.log(person.firstName + " " + person.lastName)
};
printPerson(contacts[0]);
printPerson(contacts[1]);
Listing Everybody

Address book programs usually have a screen that lists all of the contacts. Let's build that feature.

We could write out separate lines of code to display all of the people like in the last exercise, but that's tedious. Instead, we can use a for loop to do this automatically.


We'll be creating a function that lists all of the users.

  1. Create a function called list that does not take any parameters.
  2. At the start of the function, define a variable to store the number of items in the contacts array. Call itcontactsLength.
  3. All of the items in an array are numbered, starting at 0. To cycle through all of the elements of the array, create a for loop that cycles from 0 up to one less than the number of items in the contacts array.
  4. Inside of the loop, add code to callprintPerson, passing in the element of the array that the loop is currently at.
  5. At the very bottom of the file, call thelist function. The list function should then loop through every member of the contacts array and print its information
var bob = {
    firstName: "Bob",
    lastName: "Jones",
    phoneNumber: "(650) 777-7777",
    email: "bob.jones@example.com"
};
var mary = {
    firstName: "Mary",
    lastName: "Johnson",
    phoneNumber: "(650) 888-8888",
    email: "mary.johnson@example.com"
};
var contacts = [bob, mary];
function printPerson(person) {
    console.log(person.firstName + " " + person.lastName);
}
function list(){
    var contactsLength = contacts.length
    for (var i = 0; i < contactsLength; i++){
        printPerson(contacts[i]);
    }
}
list();
Finding that Special Someone

Let's say we're looking for someone in our address book with a specific last name.

We can do this with a technique for searching arrays called "linear search". With it, we use a loop to check through all of the items in the array one-by-one until we see the item that we want.

We can apply linear search to print out all of the people that have a particular last name

We'll be creating a function that can search for people with a specific last name and print those people out with the printPerson function.

  1. Create a function called search that takes a parameter called lastName. Leave the list function alone.
  2. Like with the last exercise, define a variable and store the number of items in the array in it. (Since every function has its own context, or scope, you can call this variable contactsLength, too, if you like!)
  3. Create a for loop that runs through all of the items in the array. For this step, the code for search is identical to that oflist.
  4. The twist comes here: in the body of the loop, rather than printing out every single item in the array, add an ifstatement that checks to see if thelastName property of the object is equal to the lastName argument. Have the function run printPerson on the person if and only if the lastName property of the person matches the lastNameargument.
  5. At the bottom of the file, call thesearch function, passing in "Jones" as the last name to search for.
var bob = {
    firstName: "Bob",
    lastName: "Jones",
    phoneNumber: "(650) 777-7777",
    email: "bob.jones@example.com"
};
var mary = {
    firstName: "Mary",
    lastName: "Johnson",
    phoneNumber: "(650) 888-8888",
    email: "mary.johnson@example.com"
};
var contacts = [bob, mary];
function printPerson(person) {
    console.log(person.firstName + " " + person.lastName);
}
function list() {
    var contactsLength = contacts.length;
    for (var i = 0; i < contactsLength; i++) {
        printPerson(contacts[i]);
    }
}
/*Create a search function
then call it passing "Jones"*/
function search(lastName){
    var contactsLength = contacts.length;
    for (var i = 0; i < contactsLength; i++) {
        if (contacts[i].lastName == lastName){
            printPerson(contacts[i]);
        }
    }
}
search("Jones");
We Made a Friend!

We have our address book in thecontacts array, but what if we make a new friend and want to add them as well?

Objects, just like other types of data, can be put into arrays with aarray[position] = object statement. To append something to the end of the array, you need to put it in the position one after the last item.

Since arrays are numbered starting at zero, the number of the last item in the array will be one less than the quantity of items in the array. The size of the array is thus the position to insert at.

The length of an array, like the length of a string, can be found with array.length.

We can do the insert in a succinct way by adding the new object directly into the array position without even giving it a name. This can be confusing, but we will be able to refer to it by its array position, so it does not need a direct name. Do it like this:

contacts[contacts.length] = {
    firstName: firstName,
    lastName: lastName,
    phoneNumber: phoneNumber,
    email: email
};

(Assuming you defined the add function with the parameters firstName,lastName, phoneNumber, and email.)

That will automatically create a new object and add it into the array. Pretty neat

We'll be creating a function that allows us to add our new friend to the address book.

  1. Create a function called add with the parameters firstName, lastName, andemail, phoneNumber.
  2. In this new function, you want to create a new contact object like bob andmary. Instead of having this object's property values be filled with strings though, set them to the appropriate function parameters passed in.
  3. Add this new contact object to thecontacts array.
  4. Call add with whatever first name, last name, phone number, and email arguments you like.
  5. Make sure you call the list function, to check if your new entry is added. And delete any other function that logs output in the console, i.e 'search' function.

Run the code!

var bob = {
    firstName: "Bob",
    lastName: "Jones",
    phoneNumber: "(650) 777-7777",
    email: "bob.jones@example.com"
};
var mary = {
    firstName: "Mary",
    lastName: "Johnson",
    phoneNumber: "(650) 888-8888",
    email: "mary.johnson@example.com"
};
var contacts = [bob, mary];
function printPerson(person) {
    console.log(person.firstName + " " + person.lastName);
}
function list() {
    var contactsLength = contacts.length;
    for (var i = 0; i < contactsLength; i++) {
        printPerson(contacts[i]);
    }
}
function search(lastName){
    var contactsLength = contacts.length;
    for (var i = 0; i < contactsLength; i++) {
        if (contacts[i].lastName == lastName){
            printPerson(contacts[i]);
        }
    }
}
function add (firstName, lastName, phoneNumber, email) {
    var contactSize = contacts.length;
    var Person = new Object();
    Person.firstName = prompt("First Name");
    Person.lastName = prompt("Last Name");
    Person.phoneNumber= prompt("Phone No.");
    Person.email = prompt("Email");
    contacts[contactSize] = Person;
};
add();
list();